<template>
  <div>
  <div class="banner">
    <img class="banner-img" width="100%" height="205" src="../../../assets/image/5.jpg" />
    <div class="banner-info">
      <div class="banner-title">大连圣亚海洋世界(AAAA景区)</div>
      <div class="banner-number" @click="handleClick">
        <img class="icon" src="../../../assets/image/图片.svg"/>
        <div class="icon-number">39</div>
      </div>
    </div>
  </div>
  <transition
  name="fade"
  enter-active-class="animated fadeInRight"
  leave-active-class="animated fadeOutRight"
  >
  <CommonGallary  v-show="showGallary" @close='handleCloseGallary'></CommonGallary>
  </transition>
  </div>
</template>

<script type="text/ecmascript-6">
import CommonGallary from '../../../common/Gallary/Gallary.vue'
export default{
  name:'banner',
  components:{
    CommonGallary
  },
  data(){
    return{
      showGallary:false
    }
  },
  methods:{
    handleClick(){
      this.showGallary = true
    },
    handleCloseGallary(){
      this.showGallary = false
    }
  }

}
</script>

<style lang="stylus" scoped>
  .banner
    overflow hidden
    position relative
    width 100%
    height 0
    padding-bottom 55%
    .banner-info
      display flex
      position absolute
      bottom 0
      left 0
      right 0
      color #fff
      background-image linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.6))
      .banner-title
        flex 1
        font-size 14px
        padding 0 10px
        line-height 35px
        font-family cursive
      .banner-number
        position relative
        padding 0 5px 5px 5px
        font-size 12px
        .icon
          font-size 30px
        .icon-number
          position absolute
          top 0
          left 0
          right 0
          bottom 0
          text-align center
          line-height 30px
          font-weight 4
</style>
